<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>我的主页</title>
	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
	<meta name="description" content="范佳东的主页，学习阶段如有问题烦请指出。">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="apple-touch-icon" href="apple-touch-icon.png">

	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="css/fontAwesome.css">
	<!-- <link rel="stylesheet" href="css/light-box.css"> -->
	<!--<link rel="stylesheet" href="css/templatemo-main.css">-->

	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
    <style>
        @keyframes seq-preloader {
  50% {
    opacity: 1;
  }
  
  100% {
    opacity: 0;
  }
}

.seq-preloader {
  background: white;
  visibility: visible;
  opacity: 1;
  position: absolute;
  z-index: 9999;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.seq-preloader.seq-preloaded {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s .5s, opacity .5s;
}

.seq-preload-indicator {
  overflow: visible;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.seq-preload-circle {
  display: inline-block;
  height: 12px;
  width: 12px;
  fill: #7a7a7a;
  opacity: 0;
  animation: seq-preloader 1.25s infinite;
}

.seq-preload-circle-2 {
  animation-delay: .15s;
}

.seq-preload-circle-3 {
  animation-delay: .3s;
}

.seq-preload-indicator-fallback {
  width: 42px;
  overflow: visible;
}

.seq-preload-indicator-fallback .seq-preload-circle {
  width: 8px;
  height:8px;
  background-color: #f4f4f4;
  border-radius: 100%;
  opacity: 1;
  display: inline-block;
  vertical-align: middle;
}

.seq-preload-indicator-fallback .seq-preload-circle-2 {
  margin-left: 3px;
  margin-right: 3px;
  width: 12px;
  height: 12px;
}

.seq-preload-indicator-fallback .seq-preload-circle-3 {
  width: 16px;
  height: 16px;
}


/* MAIN CSS */

@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #fff;
  }
}
@keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #fff;
  }
}
@-webkit-keyframes fillColour {
  0% {
    color: #fff;
  }
  50% {
    color: #fff;
  }
  100% {
    color: #333;
  }
}
@keyframes fillColour {
  0% {
    color: #fff;
  }
  50% {
    color: #fff;
  }
  100% {
    color: #333;
  }
}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

html {
	overflow: hidden;
}

body {
  overflow: hidden;
  font-size: 100%;
}

nav {
	top: 10vh;
	bottom: 10vh;
  	text-align: center;
  	background: rgba(0, 0, 0, 0.5);
  	position: fixed;
  	z-index: 100;
  	height: 80vh;
  	left: 0;
  	width: 20%;
  	font-weight: 300;
  	font-size: 1rem;
}

nav em {
	font-style: normal;
	margin-left: 5px;
	font-size: 14px;
}
nav ul li i {
	width: 25px;
}

nav ul li a {
	font-size: 18px;
	display: block;
	width: 100%;
}

nav .mini-logo {
	display: none;
}

nav .logo {
	margin-top: 45px;
	padding: 0px 20px;
}

nav .logo img {
	max-width: 100%;
	overflow-y: hidden;
}

nav ul {
	margin-top: 60px;
  	text-align: left;
  	margin-left: 40px;
  	list-style-type: none;
  	height: 48vh;
  	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
  	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  	-ms-flex-pack: distribute;
    justify-content: space-around;
}
nav ul li {
	margin: 5px 20px 5px 0;
}
nav a, nav a:visited, nav a:active {
  color: #fff;
}
nav a {
	text-decoration: none!important;
	font-size: 14px;
	letter-spacing: 0.5px;
  	-webkit-transition: color 2s, background 1s;
  	transition: color 2s, background 1s;
  	padding: 20px 20px;
  	position: relative;
  	z-index: 0;
}
nav a.active {
  background-color: #fff;
  color: #232323;
}
nav a::before {
  content: "";
  position: absolute;
  height: 0%;
  width: 0%;
  bottom: 0;
  left: 0;
  opacity: 1;
  z-index: -1;
}
nav a:hover {
	text-decoration: none;
  -webkit-animation: fillColour 0.7s forwards ease-in-out;
          animation: fillColour 0.7s forwards ease-in-out;
}
nav a:hover::before {
  -webkit-animation: fill 0.7s forwards ease-in-out;
          animation: fill 0.7s forwards ease-in-out;
  opacity: 1;
}

.slides {
  width: 500vw;
  height: 100vh;
  -webkit-transition: -webkit-transform 0.8s ease;
  transition: -webkit-transform 0.8s ease;
  transition: transform 0.8s ease;
  transition: transform 0.8s ease, -webkit-transform 0.8s ease;
}
.slides .slide {
  height: 100vh;
  width: 100vw;
  float: left;
  text-align: center;
  background-size: cover;
}
.slides .slide .content {
  overflow-y: scroll;
  position: relative;
  width: 70%;
  height: 80%;
  left: 30%;
  top: 10%;
  bottom: 10%;
  background: rgba(0, 0, 0, 0.5);
}
.content::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.5);
}
/* Add a thumb */
.content::-webkit-scrollbar-thumb {
    background: rgba(250, 250, 250, 0.5);
}

.slides .slide:nth-child(1) {
  background-image: url(./img/first_bg.jpg);
}
.slides .slide:nth-child(2) {
  background-image: url(./img/second_bg.jpg);
}
.slides .slide:nth-child(3) {
  background-image: url(./img/third_bg.jpg);
}
.slides .slide:nth-child(4) {
  background-image: url(./img/fourth_bg.jpg);
 }
.slides .slide:nth-child(5) {
  background-image: url(./img/fifth_bg.jpg);
}
.slides .slide img {
  width: 100%;
}


.main-btn a:hover {
	background-color: #fff;
	color: #232323!important;
}


.first-content {
	padding: 100px;
	text-align: left;
	padding-top: 13%;
}

.first-content .author-image img {
	margin-top: 15px;
	border-radius: 30px;
	max-width: 100%;
	overflow: hidden;
	float: left;
	margin-right: 35px;
}

.first-content h2 {
	font-size: 36px;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.5px;
	border-bottom: 2px solid #fff;
	display: inline-block;
	padding-bottom: 10px;
	margin-bottom: 20px;
	margin-top: 0px;
}

.first-content p {
	color: #fff;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 2px;
	line-height: 26px;
	margin-bottom: 20px;
}

.first-content em {
	font-style: normal;
	font-weight: 600;
}

.first-content .main-btn {
	display: inline-block;
	margin-right: 15px;
}

.first-content .main-btn a {
	display: inline-block;
	border: 2px solid #fff;
	padding: 8px 15px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
	text-decoration: none;
	transition: all 0.5s;
	transition: all 0.5s;
}

.first-content .fb-btn {
	display: inline-block;
}

.first-content .fb-btn a {
	display: inline-block;
	background-color: #fff;
	border: 2px solid #fff;
	padding: 8px 15px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #232323;
	text-decoration: none;
	transition: all 0.5s;
}

.first-content .fb-btn a:hover {
	color: #fff;
	background-color: transparent;
}


.second-content .container-fluid {
	padding-right: 0px;
	padding-left: 0px;
}

.second-content .container-fluid .col-md-6 {
	padding-right: 0px;
	padding-left: 0px;
}

.second-content .right-image img {
	max-width: 100%;
	min-width: 100%;
	overflow: hidden;
	float: right;
}

.second-content .left-content {
	padding: 60px;
	text-align: left;
}

.second-content h2 {
	font-size: 36px;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.5px;
	border-bottom: 2px solid #fff;
	display: inline-block;
	padding-bottom: 10px;
	margin-bottom: 20px;
	margin-top: 0px;
}
@font-face{
	font-family: myfont1;
	src: url('./fonts/汉仪细行楷简.ttf')
}
.second-content p {
	font-family: myfont1;
	font-size: 18px;
	color: #fff;
	letter-spacing: 0.5px;
	font-weight: 300;
	line-height: 24px;
	margin-bottom: 30px;
	text-indent: 2em;
}

.second-content a {
	color: #fff;
	text-decoration: underline;
}

.second-content .main-btn a {
	display: inline-block;
	border: 2px solid #fff;
	padding: 8px 15px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
	text-decoration: none;
	transition: all 0.5s;
}


.third-content {
	text-align: left;
	padding: 30px;
}

.third-content .container-fluid {
	padding-right: 7.5px;
	padding-left: 7.5px;
}

.third-content .first-section .left-content {
	margin-right: 15px;
	margin-top: 12px;
}

.third-content .first-section .right-image {
	margin-left: 15px;
}

.third-content .second-section {
	margin-top: 30px;
}

.third-content .second-section .right-content {
	margin-left: 15px;
	margin-top: 12px;
}

.third-content .second-section .left-image {
	margin-right: 15px;
}

.third-content h2 {
	font-size: 24px;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.5px;
	border-bottom: 2px solid #fff;
	display: inline-block;
	padding-bottom: 10px;
	margin-bottom: 20px;
	margin-top: 0px;
}

.third-content p {
	font-size: 13px;
	color: #fff;
	letter-spacing: 0.5px;
	font-weight: 300;
	line-height: 24px;
	margin-bottom: 20px;
}

.third-content .main-btn a {
	display: inline-block;
	border: 2px solid #fff;
	padding: 8px 15px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
	text-decoration: none;
	transition: all 0.5s;
}

.third-content .col-md-6 {
	margin: 0px;
	padding: 0px;
}


.fourth-content {
	padding: 5px;
}

.fourth-content .container-fluid {
	padding-right: 15px;
	padding-left: 15px;
}

.fourth-content .container-fluid .col-md-4 {
	padding-right: 0px;
	padding-left: 0px;
}

.fourth-content .item {
	margin: 10px;
}

.fourth-content .item img {
	max-width: 100%;
	overflow: hidden;
}

.fourth-content .item .thumb {
	position: relative;
}
.fourth-content img{
	cursor: pointer;
}
.fourth-content .item .hover-effect {
	/* text-align: left;
	position: absolute;
	color: #fff;
	background-color: rgba(0,0,0,0.95);
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	visibility: hidden;
	transition: all 0.8s; */
	opacity: 0;
}

/* .fourth-content .item:hover .hover-effect {
	opacity: 1;
	visibility: visible;
} */

.fourth-content .item .hover-effect .hover-content {
	transform: translateY(-50%);
    position: absolute;
    text-align: left;
    width: 100%;
    top: 50%;
    left: 0;
    padding: 30px;
}

.fourth-content .item .hover-effect h2 {
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.5px;
	border-bottom: 1px solid #fff;
	display: inline-block;
	padding-bottom: 10px;
	margin-bottom: 10px;
	margin-top: 0px;
}

.fourth-content .item .hover-effect p {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 22px;
	padding-bottom: 0px;
	margin-bottom: 0px;
}
.contain1{
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 100%;
	height: 100%;
}
.contain1 span{
	height: 30px;
	color: white;
	font-size: 13px;
	margin-right: 12px;
	font-weight: bold;
}
.contain1 input[type='text']{
	height: 30px;
	background-color: rgba(82, 79, 79, 0.3);
	color: white;
	border: none;
	width: 300px;
	font-size: 12px;
	margin-right: 15px;
	text-align: center;
}
.contain1 input[type='text']:hover{
	border: 3px #fff solid;
	color: #fff;
}
.contain1 input[type='button']{
	background-color: white;
	color: #232323;
	height: 30px;
	width: 80px;
	border-radius: 3px;
	border: none;
	border: 3px white solid;
	font-size: 12px;
}
.contain1 input[type='button']:hover{
	background-color: rgba(0,0,0,0);
	color: white;
}
#href{
	background-color: yellow;
	border: 3px yellow solid;
	font-size: 12px;
	margin-left: 10px;
}
#href:hover{
	background-color: rgba(0,0,0,0);
	color: yellow;
}
.footer .content {
	left: 30%;
	width: 70%;
	max-width: 70%;
	position: absolute;
	bottom: 0;
	right: 0;
	display: inline-block;
}

.footer .content p {
	text-align: center;
	font-size: 13px;
	color: #fff;
	margin-bottom: 20px;
}

.footer .content p a {
	color: #aaa;
	text-decoration: none;
}



/* REPONSIVE */

@media (max-width: 991px) {

	nav ul {
  		margin-left: 25px;
  	}

	.first-content {
		text-align: center;
		padding: 50px;
	}

	.first-content .author-image img {
		max-width: 195px;
		float: none;
		margin-right: 0px;
		margin-bottom: 30px;
	}

	.third-content .first-section {
		border-bottom: 1px solid rgba(250,250,250,0.3);
		padding-bottom: 45px;
		margin-bottom: 45px;
	}

	.third-content .first-section .left-content {
		margin-right: 0px;
		margin-bottom: 30px;
	}

	.third-content .first-section .right-image {
		margin-left: 0px;
	}

	.third-content .second-section .right-content {
		margin-left: 0px;
		margin-top: 30px;
	}


	.third-content .second-section .left-image {
		margin-right: 0px;
	}

	.fifth-content #map {
		padding: 30px 30px 30px 30px;
	}

	.fifth-content #contact {
		padding: 30px 30px 30px 30px;
	}

}

@media (max-width: 749px) {

	nav {
		width: 15vh;
	}

	nav .logo {
		display: none;
	}

	nav .mini-logo {
		margin-top: 60px;
		display: block;
	}

	nav ul {
		text-align: center;
		margin-left: 0px;
	}


	nav ul li em {
		display: none;
	}

	nav ul li i {
		width: 20px;
		height: 20px;
		line-height: 20px;
		text-align: center;
	}

	.first-content {
		padding: 30px 5px;
	}

	.first-content .main-btn {
		display: inline-block;
		margin-right: 0px;
		margin-bottom: 15px;
	}

	.second-content .left-content {
		padding: 30px;
		text-align: left;
	}

	.fourth-content .item .hover-effect h2 {
		font-size: 15px;
	}


	.fifth-content #map {
		padding: 15px 15px 15px 15px;
	}

	.fifth-content #contact {
		padding: 15px 15px 15px 15px;
	}

}

@media(max-width: 450px) {
	nav ul {
		margin-top: 30px;
	}
	nav ul li {
		margin: 10px 0px;
	}
	nav a {
	  	padding: 15px 20px;
	}
}
    </style>
	<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>

<body>

<div class="sequence">

  <div class="seq-preloader">
	<svg width="39" height="16" viewBox="0 0 39 16" xmlns="http://www.w3.org/2000/svg" class="seq-preload-indicator"><g fill="#F96D38"><path class="seq-preload-circle seq-preload-circle-1" d="M3.999 12.012c2.209 0 3.999-1.791 3.999-3.999s-1.79-3.999-3.999-3.999-3.999 1.791-3.999 3.999 1.79 3.999 3.999 3.999z"/><path class="seq-preload-circle seq-preload-circle-2" d="M15.996 13.468c3.018 0 5.465-2.447 5.465-5.466 0-3.018-2.447-5.465-5.465-5.465-3.019 0-5.466 2.447-5.466 5.465 0 3.019 2.447 5.466 5.466 5.466z"/><path class="seq-preload-circle seq-preload-circle-3" d="M31.322 15.334c4.049 0 7.332-3.282 7.332-7.332 0-4.049-3.282-7.332-7.332-7.332s-7.332 3.283-7.332 7.332c0 4.05 3.283 7.332 7.332 7.332z"/></g></svg>
  </div>
  
</div>


	<nav>
	  <div class="logo">
		  <img src="img/logo.png" alt="">
	  </div>
	  <div class="mini-logo">
		  <img src="img/mini_logo.png" alt="">
	  </div>
	  <ul>
		<li><a href="#1"><i class="fa fa-home"></i> <em>首页</em></a></li>
		<li><a href="#2"><i class="fa fa-user"></i> <em>关于</em></a></li>
		<!-- <li ><a href="#3"><i class="fa fa-pencil"></i> <em>加入</em></a></li> -->
		<li><a href="#3"><i class="fa fa-code"></i> <em>代码片段</em></a></li>
		<li><a href="#4"><i class="fa fa-envelope"></i> <em>联系方式</em></a></li>
	  </ul>
	</nav>
	
	<div class="slides">
	  <div class="slide" id="1">
		<div class="content first-content">
		  <div class="container-fluid">
			  <div class="col-md-3">
			  <div class="author-image"><img src="img/myself_image.jpg" alt="哎哟，加载失败~"></div>
			  </div>
			  <div class="col-md-9">
				  <h2>范佳东</h2>
				  <p>90后，<em>毕业于武汉软件工程职业学院，</em>来自湖北孝感，<em>热衷于前端编程，</em>是一名有责任心、有上进心的程序员。</p>
				  <div class="main-btn"><a href="#2">更 多</a></div>
				  <!-- <div class="fb-btn"><a href="http://wpa.qq.com/msgrd?v=3&uin=776875292&site=oicqzone.com&menu=yes" target="_blank">我的QQ</a></div> -->
			  </div>
		  </div>
		</div>
	  </div>
	  <div class="slide" id="2">
		<div class="content second-content">
			<div class="container-fluid">
				<div class="col-md-6">
					<div class="left-content">
						<h2>我</h2>
						<p>多年前我还是天生放荡不羁的少年，随时可能来一场说走就走的旅行，路旁的风景都只是匆匆过客，从没有流连光景</p> 
						<p>后来，我接触了前端，从此就一发不可收拾地爱上了它</p>
						<p>我要努力变得更强，让更多人承认我的能力</p>
						<p>我会坚持我的梦想、坚定我的目标，加油！</p>
					  <div class="main-btn"><a href="#3">更 多</a></div>
				  </div>
				</div>
				<div class="col-md-6">
					<div class="right-image">
					  <img src="img/about_image.jpg" alt="">
				  </div>
				</div>
			</div>
		</div>
	  </div>
	  <!-- <div class="slide" id="3">
		<div class="content third-content">
			<div class="container-fluid">
				<div class="col-md-12">
					<div class="row">
						<div class="first-section">
							<div class="container-fluid">
								<div class="row">
									<div class="col-md-6">
										<div class="left-content">
											<h2>了解我的团队</h2>
											<p>Vestibulum augue ex, finibus sit amet nisi id, maximus ultrices ipsum. Maecenas rhoncus nibh in mauris lobortis, a maximus diam faucibus. In et eros urna. Suspendisse potenti. Pellentesque commodo, neque nec molestie tempus, purus ante feugiat augue.</p>
											<div class="main-btn"><a href="#4">继续了解</a></div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="right-image">
											<img src="img/first_service.jpg" alt="first service">
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="second-section">
							<div class="container-fluid">
								<div class="row">
									<div class="col-md-6">
										<div class="left-image">
											<img src="img/second_service.jpg" alt="second service">
										</div>
									</div>
									<div class="col-md-6">
										<div class="right-content">
											<h2>Maecenas eu purus eu sapien</h2>
											<p>Sed vitae felis in lorem mollis mollis eget in leo. Donec commodo, ex nec rutrum venenatis, nisi nisl malesuada magna, sed semper ipsum enim a ipsum. Aenean in ante vel mi molestie bibendum. Quisque sit amet lacus in diam pretium faucibus. Cras vel justo lorem.</p>
											<div class="main-btn"><a href="#4">更 多</a></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	  </div> -->
	  <div class="slide" id="4">
		<div class="content fourth-content">
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-4 col-sm-6">
						<div class="item">
							<div class="thumb">
								<a href="img/first_big_item.jpg" data-lightbox="image-1"><div class="hover-effect">
									<div class="hover-content" id="firstImg">
										<h2>我的图片一</h2>
										<p>Quisque sit amet lacus in diam pretium faucibus. Cras vel justo lorem.</p>
									</div>
								</div></a>
								<div class="image">
									<img src="img/first_item.jpg">
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 col-sm-6">
						<div class="item">
							<div class="thumb">
								<a href="img/second_big_item.jpg" data-lightbox="image-1"><div class="hover-effect">
									<div class="hover-content" id="secondImg">
										<h2>我的图片二</h2>
										<p>Donec eget dictum tellus. Curabitur a interdum diam. Nulla vestibulum porttitor porta.</p>
									</div>
								</div></a>
								<div class="image">
									<img src="img/second_item.jpg">
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 col-sm-6">
						<div class="item">
							<div class="thumb">
								<a href="img/third_big_item.jpg" data-lightbox="image-1"><div class="hover-effect">
									<div class="hover-content">
										<h2>我的图片三</h2>
										<p>Cras varius dolor et augue fringilla, eu commodo sapien iaculis.</p>
									</div>
								</div></a>
								<div class="image">
									<img src="img/third_item.jpg">
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 col-sm-6">
						<div class="item">
							<div class="thumb">
								<a href="img/fourth_big_item.jpg" data-lightbox="image-1"><div class="hover-effect">
									<div class="hover-content">
										<h2>我的图片四</h2>
										<p>Vestibulum augue ex, finibus sit amet nisi id, maximus ultrices ipsum.</p>
									</div>
								</div></a>
								<div class="image">
									<img src="img/fourth_item.jpg">
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 col-sm-6">
						<div class="item">
							<div class="thumb">
								<a href="img/fifth_big_item.jpg" data-lightbox="image-1"><div class="hover-effect">
									<div class="hover-content">
										<h2>我的图片五</h2>
										<p>Donec commodo, ex nec rutrum venenatis, nisi nisl malesuada magna.</p>
									</div>
								</div></a>
								<div class="image">
									<img src="img/fifth_item.jpg">
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 col-sm-6">
						<div class="item">
							<div class="thumb">
								<a href="img/sixth_big_item.jpg" data-lightbox="image-1"><div class="hover-effect">
									<div class="hover-content">
										<h2>我的图片六</h2>
										<p>Maecenas dapibus neque sed nisl consectetur, id semper nisi egestas.</p>
									</div>
								</div></a>
								<div class="image">
									<img src="img/sixth_item.jpg">
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 col-sm-6">
						<div class="item">
							<div class="thumb">
								<a href="img/seventh_big_item.jpg" data-lightbox="image-1"><div class="hover-effect">
									<div class="hover-content">
										<h2>我的图片七</h2>
										<p>Etiam aliquet, est id varius fringilla, eros libero pellentesque lectus.</p>
									</div>
								</div></a>
								<div class="image">
									<img src="img/seventh_item.jpg">
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 col-sm-6">
						<div class="item">
							<div class="thumb">
								<a href="img/eight_big_item.jpg" data-lightbox="image-1"><div class="hover-effect">
									<div class="hover-content">
										<h2>我的图片八</h2>
										<p>Vestibulum augue ex, finibus sit amet nisi id, maximus ultrices ipsum.</p>
									</div>
								</div></a>
								<div class="image">
									<img src="img/eight_item.jpg">
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 col-sm-6">
						<div class="item">
							<div class="thumb">
								<a href="img/ninth_big_item.jpg" data-lightbox="image-1"><div class="hover-effect">
									<div class="hover-content">
										<h2>我的图片九</h2>
										<p>Orci varius natoque penatibus et magnis dis parturient montes.</p>
									</div>
								</div></a>
								<div class="image">
									<img src="img/ninth_item.jpg">
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 col-sm-6">
						<div class="item">
							<div class="thumb">
								<a href="img/fifth_big_item.jpg" data-lightbox="image-1"><div class="hover-effect">
									<div class="hover-content">
										<h2>我的图片十</h2>
										<p>Vestibulum augue ex, finibus sit amet nisi id, maximus ultrices ipsum.</p>
									</div>
								</div></a>
								<div class="image">
									<img src="img/fifth_item.jpg">
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 col-sm-6">
						<div class="item">
							<div class="thumb">
								<a href="img/first_big_item.jpg" data-lightbox="image-1"><div class="hover-effect">
									<div class="hover-content">
										<h2>我的图片十一</h2>
										<p>Cras varius dolor et augue fringilla, eu commodo sapien iaculis.</p>
									</div>
								</div></a>
								<div class="image">
									<img src="img/first_item.jpg">
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 col-sm-6">
						<div class="item">
							<div class="thumb">
								<a href="img/second_big_item.jpg" data-lightbox="image-1"><div class="hover-effect">
									<div class="hover-content">
										<h2>我的图片十二</h2>
										<p>Etiam tincidunt magna ex, sit amet lobortis felis bibendum id.</p>
									</div>
								</div></a>
								<div class="image">
									<img src="img/second_item.jpg">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	  </div>
	  <div class="slide" id="5">
		<div class="content fifth-content">
			<div class="contain1" id="contain1">
				<div><span>电话</span><input readonly type="text"><input type="button" value="复制电话"></div>
				<div><span>邮箱</span><input readonly type="text"><input type="button" value="复制邮箱"></div>
				<div><span>微信</span><input readonly type="text"><input type="button" value="复制微信"></div>
				<div><span>QQ</span><input readonly type="text"><input type="button" value="复制QQ"><input id="href" type="button" value="添加我为好友"></div>
				<div><span>主页</span><input readonly type="text"><input type="button" value="复制主页地址"><input id="href" type="button" value="跳转到主页"></div>
			</div>
		</div>
	  </div>
	</div>

	<div class="footer">
	  <div class="content">
		  <p>Copyright &copy; 2019.VanSir All rights reserved.
		  </p>
	  </div>
	</div>


<script src="js/vendor/jquery-1.11.2.min.js"></script>

<script src="js/vendor/bootstrap.min.js"></script>

<script src="js/datepicker.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<script type="text/javascript">
$(function() {
	var phone = 17607101164;
	var email = '776875292@qq.com';
	var wx = 17607101164;
	var qq = 776875292;
	var address = 'http://vansir1001.gitee.io/qq776875292.github.io';
	var inp = $("#contain1 input[type='text']");
	var btn = $("#contain1 input[type='button']");
	inp.eq(0).val(phone);
	inp.eq(1).val(email);
	inp.eq(2).val(wx);
	inp.eq(3).val(qq);
	inp.eq(4).val(address);
	for(let i=0;i<inp.length-1;i++){
	if(i<4){
		btn.eq(i).on('click',()=>{
			const valueLength = inp.eq(i).val().length;
			inp.eq(i).focus();
			inp.eq(i).select();
			document.execCommand('copy');
		});
	}
}
	btn.eq(4).on('click',function () {
		window.open("http://wpa.qq.com/msgrd?v=3&uin=776875292&site=oicqzone.com&menu=no");
	});
	btn.eq(5).on('click',function () {
		const valueLength = inp.eq(4).val().length;
			inp.eq(4).focus();
			inp.eq(4).select();
			document.execCommand('copy');
	});
	btn.eq(6).on('click',function () {
		window.open(address);
	});
	// navigation click actions 
	$('.scroll-link').on('click', function(event){
		event.preventDefault();
		var sectionID = $(this).attr("data-id");
		scrollToID('#' + sectionID, 750);
	});
	// scroll to top action
	$('.scroll-top').on('click', function(event) {
		event.preventDefault();
		$('html, body').animate({scrollTop:0}, 'slow');         
	});
	// mobile nav toggle
	$('#nav-toggle').on('click', function (event) {
		event.preventDefault();
		$('#main-nav').toggleClass("open");
	});
	function addClick (position,url) {
		$('#4').find('.item:eq('+position+')').on('click', function (){
		// location.href='practice/迷你微信练习1/迷你微信练习1.html';
		window.open('practice/'+url);
	});
	}
	addClick(0,'迷你微信练习1/迷你微信练习1.html');
	addClick(1,'随机生成方块/index.html');
	addClick(2,'forecast/index.html');
	addClick(3,'移动京东/index.html');
	addClick(4,'挑战10秒.html');
	addClick(5,'movie/index.html');
    addClick(6,'pro3/index.html');
    addClick(7,'qrCode/index.html');
});
// scroll function
function scrollToID(id, speed){
	var offSet = 0;
	var targetOffset = $(id).offset().top - offSet;
	var mainNav = $('#main-nav');
	$('html,body').animate({scrollTop:targetOffset}, speed);
	if (mainNav.hasClass("open")) {
		mainNav.css("height", "1px").removeClass("in").addClass("collapse");
		mainNav.removeClass("open");
	}
}
if (typeof console === "undefined") {
	console = {
		log: function() { }
	};
}
</script>
</body>
</html>
